import {init} from 'snabbdom/src/package/init'
import {h} from 'snabbdom/src/package/h'
import {eventListenersModule} from 'snabbdom/src/package/modules/eventlisteners'
import {styleModule} from 'snabbdom/src/package/modules/style'
import {datasetModule} from 'snabbdom/src/package/modules/dataset'
const patch = init([
  eventListenersModule,
  styleModule,
  datasetModule
])
// 导入列表内容
import {nodeList, sortType} from './data'
// 内容列表渲染
function renderList() {
  let arrNode = []
  nodeList.forEach((item, index) => {
    arrNode.push(
      h('tr', {
        key: item.rank,
        style: {
          opacity: '0', transform: 'translate(-200px)',
          delayed: {transform: `translateY(${item.offset}px)`, opacity: '1'},
          remove: {opacity: '0', transform: `translateY(${item.offset}px) translateX(200px)`}},
        hook: {
          remove(ch, rm) {
            console.log('我要删除了', item.rank);
            rm()
          },
          insert: (vnode) => { item.elmHeight = vnode.elm.offsetHeight; }
        },
      }, [
        h('td', item.rank),
        h('td', item.title),
        h('td', item.description),
        h('td', {
          style: {
            color: '#fff'
          },
          dataset: {
            dindex: index
          },
          on: {
            'click': deleteNode
          }
        }, '删除')
      ])
    )
  })
  return arrNode
}

// 排序方式列表
const sortListNode = h('div.sort', {
  key: 'sort'
}, [
  h('span.sort-title', {
    style: {
      color: '#f00'
    }
  }, 'Sort by:'),
  h('span', {
    on: {
      click: soryByRank
    }
  }, 'Rank'),
  h('span', {
    on: {
      click: soryByTitle
    }
  }, 'Title'),
  h('span', {
    on: {
      click: soryByDesc
    }
  }, 'Description'),
  h('span', {
    on: {
      click: addNode
    }
  }, 'Add')
])
// 合并所有虚拟dom
let vnode = h('div#app', [
  // 排序方式
  sortListNode,
  // 列表
  h('table', {
    key: 'table'
  }, [
    ...renderList()
  ])
])
let app = document.querySelector('#app')
let oldVnode = patch(app, vnode)

// 重新渲染dom
function renderHandler() {
  vnode = h('div#app', [
    // 排序方式
    sortListNode,
    // 列表
    h('table.htable', {
      key: 'table'
    }, [
      ...renderList()
    ])
  ])
  oldVnode = patch(oldVnode, vnode)
}
// 排序方法：按等级排序
function soryByRank() {
  nodeList.sort((a, b) => a.rank-b.rank)
  console.log(nodeList);
  renderHandler()
}
// 排序方法：按标题排序
function soryByTitle() {
  nodeList.sort((a, b) => {
    let x = a.title.toLowerCase()
    let y = b.title.toLowerCase()
    if (x < y) return -1
    if (x > y) return 1
    return 0
  })
  renderHandler()
}
// 排序方法：按描述排序
function soryByDesc() {
  nodeList.sort((a, b) => {
    let x = a.description.toLowerCase()
    let y = b.description.toLowerCase()
    if (x < y) return 1
    if (x > y) return -1
    return 0
  })
  renderHandler()
}

// 删除元素
function deleteNode(e) {
  const dIndex = e.target.dataset.dindex
  nodeList.splice(dIndex, 1)
  renderHandler()
}
// 添加元素
function addNode() {
  nodeList.push({
    rank: parseInt(Math.random() * ( 10 +1)),
    title: 'Zindex',
    description: 'description'
  })
  renderHandler()
}